<template>
  <div>
<!--    header-->
    <div>
      <div class="bornd-list">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-row :gutter="10">
              <el-col :span="6">
                <div class="header-line">
                  <div class="header-line-img">
                    <img
                      src="https://tangerine-core.oss-cn-hangzhou.aliyuncs.com/-1/material/921a90f5-a8bc-46b4-a01c-58009a526bb7.png"
                      alt="">
                  </div>
                  <div class="header-line-num">
                    <p class="header-line-title">采集总数</p>
                    <div class="header-line-number">
                      <i>8119</i>吨
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="header-line header-line02">
                  <div class="header-line-img">
                    <img
                      src="https://tangerine-core.oss-cn-hangzhou.aliyuncs.com/-1/material/921a90f5-a8bc-46b4-a01c-58009a526bb7.png"
                      alt="">
                  </div>
                  <div class="header-line-num">
                    <p class="header-line-title">商品总数</p>
                    <div class="header-line-number">
                      <i>8119</i>吨
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="header-line header-line03">
                  <div class="header-line-img">
                    <img
                      src="https://tangerine-core.oss-cn-hangzhou.aliyuncs.com/-1/material/921a90f5-a8bc-46b4-a01c-58009a526bb7.png"
                      alt="">
                  </div>
                  <div class="header-line-num-list">
                    <div class="header-line-num">
                      <p class="header-line-title">水泥购销合同</p>
                      <div class="header-line-number">
                        <i>8119</i>
                      </div>
                    </div>
                    <div class="header-line-num">
                      <p class="header-line-title">昨日新增</p>
                      <div class="header-line-number">
                        <i>8119</i>
                      </div>
                    </div>
                    <div class="header-line-num">
                      <p class="header-line-title">本月新增</p>
                      <div class="header-line-number">
                        <i>8119</i>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row class="mt-10">
              <el-col :span="24">
                <div class="line-header">
                  <div class="line-list">
                    <i>8987</i>
                    <p>水泥采集总数</p>
                  </div>
                  <div class="line-list">
                    <i>8987</i>
                    <p>轮胎采集总数</p>
                  </div>
                  <div class="line-list">
                    <i>8987</i>
                    <p>砂石采集总数</p>
                  </div>
                  <div class="line-list">
                    <i>8987</i>
                    <p>混煤灰采集总数</p>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row class="mt-10" :gutter="10">
              <el-col :span="8">
                <div class="content-c-l">
                  <div class="content-c-l-t">
                    <span>今日行业定价</span>
                    <span>+8.3%</span>
                  </div>
                  <div class="content-c-l-c">
                    ¥8389/吨
                  </div>
                  <div class="content-c-l-f">
                    P.O 42.5
                  </div>
<!--                  <img src="./bg.jpg" alt="" class="dingj-img">-->
                </div>
              </el-col>
              <el-col :span="8">
                <div class="content-c-l content-c-l02">
                  <div class="content-c-l-t">
                    <span>今日行业定价</span>
                    <span>+8.3%</span>
                  </div>
                  <div class="content-c-l-c">
                    ¥8389/吨
                  </div>
                  <div class="content-c-l-f">
                    P.O 42.5
                  </div>
<!--                  <img src="./bg.jpg" alt="" class="dingj-img">-->
                </div>
              </el-col>
              <el-col :span="8">
                <div class="content-c-l content-c-l03">
                  <div class="content-c-l-t">
                    <span>今日行业定价</span>
                    <span>+8.3%</span>
                  </div>
                  <div class="content-c-l-c">
                    ¥8389/吨
                  </div>
                  <div class="content-c-l-f">
                    P.O 42.5
                  </div>
<!--                  <img src="./bg.jpg" alt="" class="dingj-img">-->
                </div>
              </el-col>
            </el-row>
            <el-row class="mt-10" :gutter="10">
              <el-col :span="24">
                <div class="table-l">
                  <div class="table-h">
                    <div class="table-h-l">
                      <i></i>物流再送详情
                    </div>
                    <div class="table-h-r">
                      查看更多 <i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                  <div class="table-cent">
                    <div class="table-cent-title table-line">
                      <span>司机/车辆</span>
                      <span>目前地址</span>
                      <span>项目名称</span>
                      <span>地址</span>
                    </div>
                    <div class="table-line-list-body">
                      <div class="table-line-list table-line" v-for="item of 5" :key="item">
                        <span>张小放</span>
                        <span>小店区肠粉姐298号</span>
                        <span>暴力壹号公馆</span>
                        <span>小区双细节53号</span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="10" class="echart-line">
              <el-col :span="12">
<!--                <div id="userOnlineChart" style="width:100%;height: 200px"></div>-->
                <Echart :options="pieOptionsData" :height="200" />
                <div class="echart-line-bottom">
                  <div class="echart-line-bottom-t echarts01">
                    <i></i>临期
                  </div>
                  <div class="echart-line-bottom-b echarts01-b">
                    <i></i>配送中
                    <i></i>会延迟
                    <i></i>已完成
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
<!--                <div id="userOnlineChart-r" style="width:100%;height: 200px"></div>-->
                <Echart :options="pieOptionsData02" :height="200" />
                <div class="echart-line-bottom echarts02">
                  <div class="echart-line-bottom-t">
                    <i></i>空闲中
                  </div>
                  <div class="echart-line-bottom-b echarts02-b">
                    <i></i>再送中
                    <i></i>等待验收
                    <i></i>会延迟
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="echart-line mt-10">
              <el-col :span="24">
                <div class="duban-body">
                  <div class="duban-body-header">督办事件</div>
                  <div class="duban-box">
                    <div class="duban-list">
                      <p>待明日配送吨数</p>
                      <i>10</i>
                      <div class="duban-list-span">
                    <span style="cursor: pointer;" @click="jumpPage('toDoItems')">
                      前往查看
                    </span>
                      </div>
                    </div>
                    <div class="duban-list">
                      <p>待网签合同（水泥购销合同）</p>
                      <i>10</i>
                      <div class="duban-list-span">
                    <span style="cursor: pointer;" @click="jumpPage('toDoItems')">
                      前往审核
                    </span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="echart-line mt-10">
              <el-col :span="24">
                <div class="calendar-box">
                  <div class="calendar-box-top">
                    <span class="calendar-box-top-title">日程</span>
                    <div class="calendar-box-top-r">
                      <el-select v-model="value1" placeholder="请选择" size="small" class="select-box" @change="dayTimeFn">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <el-calendar v-model="value" :range="dayTime">
                    <template
                      slot="dateCell"
                      slot-scope="{date, data}">
                      <p class="time-box">
                        <span class="time-day">{{ data.day.split('-').slice(1)[1] }}</span>
                        <span class="time-day-one"><i></i><i></i></span>
                      </p>
                    </template>
                  </el-calendar>
                  <div class="calendar-time">
                    <i></i>恒大华府
                    <i></i>保利·一号公关
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <submitDocuments v-show="submitDocumentsShow" @close="submitDocumentsShow = false"></submitDocuments>

</template>
<script setup lang="ts" name="Home">
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useRouter } from "vue-router";
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import avatarImg from '@/assets/imgs/avatar.gif'
import submitDocuments from './submitDocuments.vue'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions01, pieOptions02, barOptions } from './echarts-data'

const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const submitDocumentsShow = ref(true)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions01) as EChartsOption
const pieOptionsData02 = reactive<EChartsOption>(pieOptions02) as EChartsOption
// 测试路由跳转
const router = useRouter()
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})
const jumpPage = (name)=>{
  router.push({name})
  console.log('跳转页面')
}
const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10
  }
  totalSate = Object.assign(totalSate, data)
}

// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
  const data = [
    {
      name: 'Github',
      icon: 'akar-icons:github-fill',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    },
    {
      name: 'Vue',
      icon: 'logos:vue',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    },
    {
      name: 'Angular',
      icon: 'logos:angular-icon',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    },
    {
      name: 'React',
      icon: 'logos:react',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    },
    {
      name: 'Webpack',
      icon: 'logos:webpack',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    },
    {
      name: 'Vite',
      icon: 'vscode-icons:file-type-vite',
      message: 'workplace.introduction',
      personal: 'Archer',
      time: new Date()
    }
  ]
  projects = Object.assign(projects, data)
}

// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
  const data = [
    {
      title: '系统升级版本',
      type: '通知',
      keys: ['通知', '升级'],
      date: new Date()
    },
    {
      title: '系统凌晨维护',
      type: '公告',
      keys: ['公告', '维护'],
      date: new Date()
    },
    {
      title: '系统升级版本',
      type: '通知',
      keys: ['通知', '升级'],
      date: new Date()
    },
    {
      title: '系统凌晨维护',
      type: '公告',
      keys: ['公告', '维护'],
      date: new Date()
    }
  ]
  notice = Object.assign(notice, data)
}

// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])

const getShortcut = async () => {
  const data = [
    {
      name: 'Github',
      icon: 'akar-icons:github-fill',
      url: 'github.io'
    },
    {
      name: 'Vue',
      icon: 'logos:vue',
      url: 'vuejs.org'
    },
    {
      name: 'Vite',
      icon: 'vscode-icons:file-type-vite',
      url: 'https://vitejs.dev/'
    },
    {
      name: 'Angular',
      icon: 'logos:angular-icon',
      url: 'github.io'
    },
    {
      name: 'React',
      icon: 'logos:react',
      url: 'github.io'
    },
    {
      name: 'Webpack',
      icon: 'logos:webpack',
      url: 'github.io'
    }
  ]
  shortcut = Object.assign(shortcut, data)
}

// 各端用户在线统计
const getUserAccessSource = async () => {
  const data = [
    { value: 335, name:'临期' },
    { value: 310, name: '配送中' },
    { value: 234, name: '会延迟'},
    { value: 135, name: '已完成' }
  ]
  set(
    pieOptionsData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  pieOptionsData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
// 各端用户在线统计
const getUserAccessSource01 = async () => {
  const data = [
    { value: 335, name: '空闲中' },
    { value: 310, name: '在送中' },
    { value: 234, name: '等待验收' },
    { value: 135, name: '会延误' }
  ]
  set(
    pieOptionsData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  pieOptionsData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 周活跃量
const getWeeklyUserActivity = async () => {
  const data = [
    { value: 13253, name: 'analysis.monday' },
    { value: 34235, name: 'analysis.tuesday' },
    { value: 26321, name: 'analysis.wednesday' },
    { value: 12340, name: 'analysis.thursday' },
    { value: 24643, name: 'analysis.friday' },
    { value: 1322, name: 'analysis.saturday' },
    { value: 1324, name: 'analysis.sunday' }
  ]
  set(
    barOptionsData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: data.map((v) => v.value),
      type: 'bar'
    }
  ])
}

const getAllApi = async () => {
  await Promise.all([
    getCount(),
    getProject(),
    getNotice(),
    getShortcut(),
    getUserAccessSource(),
    getUserAccessSource01(),
    getWeeklyUserActivity()
  ])
  loading.value = false
}

getAllApi()
</script>

<style lang="scss">
.bornd-list {
  //padding: 20px;
  background: #f8f8f8;
  padding: 20px;
  margin: -20px;
}

.header-line {
  color: #fff;
  display: flex;
  background: #6777f9;
  border-radius: 10px;
  padding: 25px 0;
}

.header-line02 {
  background: #fba22f;
}

.header-line03 {
  background: #fb8451;
}

.header-line-img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.header-line-img img {
  width: 100%;
  height: 100%;
}

.header-line-num-list {
  display: flex;
  flex: 1;
}

.header-line-title {
  margin-bottom: 5px;
  font-weight: 200;
}

.header-line-number {
  font-weight: 400;
  font-size: 20px;
}

.header-line-num {
  flex: 1;
}

.line-header {
  background: #fff;
  border-radius: 10px;
  display: flex;
  padding: 30px 0;
}

.line-list {
  border-right: 1px solid #eee;
  flex: 1;
  text-align: center;
}

.line-list:last-child {
  border-right: none;
}

.line-list i {
  font-size: 26px;
}

.line-list p {
  color: #999;
  font-size: 14px;
}

.mt-10 {
  margin-top: 20px;
}

.content-c-l {
  border-radius: 10px;
  background: #863fe5;
  color: #fff;
  padding: 20px;
}

.content-c-l02 {
  background: #fac535;
}

.content-c-l03 {
  background: #39c5fb;
}

.content-c-l-t {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  align-items: center;
}

.content-c-l-c {
  font-size: 22px;
  margin: 5px 0;
  font-weight: 300;
}

.content-c-l-f {
  font-size: 12px;
}

.table-l {
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}

.table-h {
  display: flex;
  justify-content: space-between;
}

.table-h-l {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.table-h-l i {
  display: block;
  width: 10px;
  height: 10px;
  background: #6a76fd;
  border-radius: 5px;
  margin-right: 10px;
  box-shadow: 0 0 2px #303fe6;
}

.table-h-r {
  color: #999;
}

.table-cent {
  border-radius: 10px;
  background: #fafbfe;
  padding: 20px;
}

.table-cent-title {
  margin-bottom: 15px;
  color: #999;
}

.table-line {
  display: flex;
  align-items: center;
  width: 100%;
}

.table-line span {
  flex: 1;
}

.table-line-list {
  width: 100%;
  padding: 10px 0;
}

.table-line-list:nth-child(2n-1) {
  background: #f3f7fe;
  border-radius: 10px;
}

.echart-line {
  border-radius: 10px;
  background: #fff;
  padding: 20px;
}

.echart-line-bottom {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #777;
}

.echart-line-bottom-t {
  display: flex;
  align-items: center;
  justify-content: center;
}

.echart-line-bottom-b {
  display: flex;
  align-items: center;
  align-items: center;
  justify-content: center;
}

.echart-line-bottom i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 4px;
  margin-left: 4px;
}

.echarts01 i {
  background: #f7b03c;
}

.echarts01-b i:nth-child(1) {
  background: #8c5ed9;
}

.echarts01-b i:nth-child(2) {
  background: #fb5576;
}

.echarts01-b i:nth-child(3) {
  background: #6fe5e0;
}

.echarts02 i {
  background: #f7b03c;
}

.echarts02-b i:nth-child(1) {
  background: #8c5ed9;
}

.echarts02-b i:nth-child(2) {
  background: #6679fa;
}

.echarts02-b i:nth-child(3) {
  background: #fb5576;
}

.duban-body-header {
  font-size: 20px;
  margin-bottom: 20px;
}

.duban-box {
  display: flex;
}

.duban-list {
  flex: 1;
  background: #fafbfe;
  border-radius: 10px;
  padding: 10px;
}

.duban-list:first-child {
  margin-right: 10px;
}

.duban-list p {
  font-size: 12px;
}

.duban-list i {
  font-size: 24px;
  margin-top: 10px;
}

.duban-list-span {
  text-align: right;
}

.duban-list-span span {
  border: 1px solid #0a6aff;
  color: #0a6aff;
  padding: 10px;
  font-size: 14px;
  border-radius: 10px;
}

.time-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-day-one {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}

.time-day-one i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.time-day-one i:first-child {
  background: #ffa29f;
  margin-bottom: 5px;
}

.time-day-one i:last-child {
  background: #8d90d9;
}

.calendar-time {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-time i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 5px;
}

.calendar-time i:first-child {
  background: #ffa29f;
  margin-bottom: 5px;
}

.calendar-time i:last-child {
  background: #8d90d9;
  margin-left: 30px;
}

.el-calendar__header {
  display: none;
}

.calendar-box-top {
  display: flex;
  justify-content: space-between;
}

.calendar-box-top-title {
  font-size: 22px;
}

.el-calendar__body {
  padding: 0;
}

.el-calendar-table__row, .el-calendar-table__row .current, .el-calendar-table__row .prev, .el-calendar-table__row .next {
  border: none !important;
}

.el-calendar-day {
  height: 50px !important;
}

.dingj-img {
  width: 100%;
}

.select-box {
  width: 130px;
}

.select-box input {
  color: #0a6aff;
  background: #ecf0ff;
  border: none;
  border-radius: 10px;
}
</style>
